<template>
    <div class="layout-wrap">
        <div class="title">
            <div class="title-label">
                <span class="title-label-text">数据概览</span>
                <el-tooltip effect="dark" placement="top-start">
                    <template #content>
                        <div>客户总数：当前企业下的客户总数。</div>
                        <div>企微客户数：已添加员工企微的客户总数，一个客户添加多个员工只统计一次。</div>
                        <div>未分配客户数：没有归属员工的客户总数。</div>
                        <div>流失客户数：删除所有已添加企微员工的客户总数。</div>
                        <div>今日新增客户数：今日净留存客户数，今日新增客户中不包含又流失的客户数。</div>
                        <div>今日流失客户数：今日删除所有已添加企微员工的客户总数。</div>
                    </template>
                    <span class="title-label-text-icon">
                        <el-icon color="#ccc" size="16"><QuestionFilled /></el-icon>
                    </span>
                </el-tooltip>
            </div>
            <!-- <div class="title-desc">数据每小时更新一次，上次更新时间{{ props.lastUpdateTime }}</div> -->
        </div>
        <div class="layout">
            <div class="population">
                <p class="population_title">客户总数</p>
                <p class="population_num">{{ formatStatisticsData(props.basicInfo.sum) }}</p>
            </div>
            <div class="population">
                <p class="population_title">企微客户数</p>
                <p class="population_num">{{ formatStatisticsData(props.basicInfo.work_wx_sum) }}</p>
            </div>
            <div class="population">
                <p class="population_title">未分配客户数</p>
                <p class="population_num">{{ formatStatisticsData(props.basicInfo.undistributed_num) }}</p>
            </div>
            <!-- <div class="population">
        <p class="population_title">待联系客户数</p>
        <p class="population_num">{{ props.basicInfo.need_contact_num }}</p>
        </div> -->
            <div class="population">
                <p class="population_title">流失客户数</p>
                <p class="population_num">{{ formatStatisticsData(props.basicInfo.lost_customers) }}</p>
            </div>
            <div class="population">
                <p class="population_title">今日新增客户数</p>
                <p class="population_num">{{ formatStatisticsData(props.basicInfo.today_new_customers) }}</p>
            </div>
            <div class="population">
                <p class="population_title">今日流失客户数</p>
                <p class="population_num">{{ formatStatisticsData(props.basicInfo.today_lost_customers) }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { formatStatisticsData } from '@/utils/utils';

const props = withDefaults(
    defineProps<{
        basicInfo: any;
        lastUpdateTime: string;
    }>(),
    {
        basicInfo: {
            sum: 0,
            work_wx_sum: 0,
            undistributed_num: 0,
            need_contact_num: 0,
            lost_customers: 0,
            today_new_customers: 0,
            today_lost_customers: 0
        },
        lastUpdateTime: ''
    }
);
</script>

<style lang="scss" scoped>
p {
    padding: 0;
    margin: 0;
}

.layout-wrap {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background: #fff;

    // min-width: 1458px;
    .title {
        padding: 17px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eaeaea;

        .title-label {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-family: PingFangSC-Medium, 'PingFang SC';
            font-weight: 500;
            color: #33302d;
            line-height: 22px;

            // .title-label-text {
            //     margin-right: 4px;
            // }
            .title-label-text-icon {
                display: inline-flex;
                margin-left: 8px;
                align-items: center;
                cursor: pointer;

                .el-icon {
                    margin-right: 2px;
                }
            }
        }

        .title-desc {
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #999;
            line-height: 20px;
        }
    }
}

.layout {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #fff;
    padding: 32px 24px;

    // border: 1px solid #e4e7ed;
    // border-bottom: 1px solid #ffc69e;
    // border-radius: 4px;
    .population {
        text-align: left;

        &_title {
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }

        &_num {
            padding-top: 8px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-size: 30px;
            font-weight: 500px;
            color: #33302d;
            line-height: 36px;
        }

        &_border {
            height: 104px;
            border-left: 1px solid #f0f0f0;
            margin: 0 210px;
        }
    }
}
</style>
